<template>
	<el-form size="large" class="forget-content-form">
		<el-form-item class="forget-animation1">
			<el-input
				text
				:placeholder="$t('message.forgetStudent.forgetStudentIdPlaceholder')"
				v-model="state.ruleForm.student_id"
				clearable
				autocomplete="off"
			>
				<template #prefix>
					<el-icon class="el-input__icon"><ele-User /></el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="forget-animation2">
			<el-input
				text
				:placeholder="$t('message.forgetStudent.forgetStudentTelephonePlaceholder')"
				v-model="state.ruleForm.phone"
				clearable
				autocomplete="off"
			>
				<template #prefix>
					<el-icon class="el-input__icon"><ele-Phone /></el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="forget-animation3">
			<el-input
				:type="state.isShowPassword ? 'text' : 'password'"
				:placeholder="$t('message.forgetStudent.forgetStudentPasswordPlaceholder')"
				v-model="state.ruleForm.password"
				autocomplete="off"
			>
				<template #prefix>
					<el-icon class="el-input__icon"><ele-Unlock /></el-icon>
				</template>
				<template #suffix>
					<i
						class="iconfont el-input__icon forget-content-password"
						:class="state.isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
						@click="state.isShowPassword = !state.isShowPassword"
					>
					</i>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="forget-register-forget forget-animation4">
			<div class="font12 mt30">
				<span>{{ $t('message.remember.text') }}</span>
				<router-link class="forget-remember-href" :to="{ path: '/login' }">{{ $t('message.remember.href') }}</router-link>
			</div>
		</el-form-item>
		<el-form-item class="forget-animation5">
			<el-button type="primary" class="forget-content-submit" round v-waves @click="onForget" :loading="state.loading.forget">
				<span>{{ $t('message.forgetStudent.forgetStudentBtnText') }}</span>
			</el-button>
		</el-form-item>
		<div class="font12 mt30 forget-animation6 forget-msg">{{ $t('message.forgetStudent.msgText') }}</div>
	</el-form>
</template>

<script setup lang="ts" name="forgetStudent">
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
import { studentForget } from '/@/api/forget';

// 定义变量内容
const { t } = useI18n();
const router = useRouter();
const state = reactive({
	isShowPassword: false,
	ruleForm: {
		student_id: '',
		phone: '',
		password: '',
	},
	loading: {
		forget: false,
	},
});

// 重置密码
const onForget = async () => {
	state.loading.forget = true;
	studentForget(state.ruleForm)
		.then((res) => {
			if (res.code === '2000') {
				ElMessage.success('重置密码成功,快去登录吧!');
				router.push({ path: '/login' });
				state.loading.forget = false;
			} else {
				ElMessage.error('重置密码失败!');
				state.loading.forget = false;
			}
		})
		.catch((err) => {
			ElMessage.error('重置密码失败,' + err);
			state.loading.forget = false;
		});
};
</script>

<style scoped lang="scss">
.forget-content-form {
	margin-top: 20px;
	@for $i from 1 through 6 {
		.forget-animation#{$i} {
			opacity: 0;
			animation-name: error-num;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			animation-delay: calc($i/10) + s;
		}
	}
	.forget-content-password {
		display: inline-block;
		width: 20px;
		cursor: pointer;
		&:hover {
			color: #909399;
		}
	}
	.forget-register-forget {
		margin-top: -40px;
		margin-bottom: -20px;
	}
	.forget-remember-href {
		text-decoration: none;
		color: #409eff;
	}
	.forget-content-submit {
		width: 100%;
		letter-spacing: 2px;
		font-weight: 300;
		margin-top: 15px;
	}
	.forget-msg {
		color: var(--el-text-color-placeholder);
	}
}
</style>
